﻿@page "/buttons"

<h3>Button 按钮</h3>

<h4>常用的操作按钮。</h4>

<Block Title="基础用法" Introduction="基础的按钮用法。" CodeFile="button.1.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Outline 按钮" Introduction='通过设置 <code>IsOutline="true"</code> 设置按钮边框颜色样式。' CodeFile="button.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
        </div>
    </div>
</Block>

<Block Title="不同尺寸" Introduction='Button 组件提供除了默认值以外的多种尺寸，通过设置 <code>Size</code> 属性可以在不同场景下选择合适的按钮尺寸。' CodeFile="button.3.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
            <div class="form-group col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
        </div>
    </div>
</Block>

<Block Title="禁用状态" Introduction="按钮不可用状态。通过设置 <code>IsDisabled</code> 属性" CodeFile="button.4.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
        </div>
    </div>
</Block>

<Block Title="按钮组" Introduction="由多个按钮组成一个组合按钮" CodeFile="button.5.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-auto">
                <div class="btn-group" role="group">
                    <Button Color="Color.Primary">按钮一</Button>
                    <Button Color="Color.Success">按钮二</Button>
                </div>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

<MethodTable Items="@GetMethods()" />
